#{extends '/template/main.html' /}
<script type="text/javascript" src="/public/js/echarts.min.js" ></script>



<div>

    <div style="margin-bottom: 20px;width:120px;float: left;margin-right: 10px;">
        <input type="text"   class="form-control datepicker" data-format="yyyy-mm-dd"  name="startTime" id="startTime" style="width: 120px" value="${startTime}" placeholder="开始时间">
    </div>
    <div style="margin-bottom: 20px;width:120px;float: left;margin-right: 10px;">
        <input type="text" class="form-control datepicker" data-format="yyyy-mm-dd" name="endTime"  id="endTime" style="width: 120px" value="${endTime}" placeholder="结束时间" >
    </div>
    <button class="btn btn-turquoise" id="searchBtn">查询</button>
    <div id="currentState" style="width:100%; height:700px;"></div>
</div>

<script type="text/javascript">

    var myChart ;
    var startTime ;
    var endTime ;

    $(function(){
        var dom = document.getElementById("currentState");
        myChart = echarts.init(dom);
        startTime = $("#startTime").val();
        endTime = $("#endTime").val();
        getType(startTime,endTime);

        $("button[id='searchBtn']").on('click', function () {
            startTime = $("#startTime").val();
            endTime = $("#endTime").val();
            getType(startTime,endTime);

        });
    });

    function getType(startTime,endTime) {
        myChart.hideLoading();

        option = {
            title: {
                text: '当前状态',
            },
            color: ['#3398DB'],
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    data: ['顾客数', '商户数', '商品数', '累计订单数', '累计成交额','浏览量','成交量'],
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    label: {
                        show:true,
                        formatter:'{b}:{@score}'
                    },
                    type:'bar',
                    barWidth: '60%',
                    data:(function(){
                        var arr=[];
                        myChart.showLoading();
                        $.ajax({
                            type : "get",
                            async : false, //同步执行
                            url : "/BS0033/admin/report/currentStateStatistics?startTime="+startTime+"&endTime="+endTime,
                            success : function(data) {
                                console.log("data",data)
                                var userCount = data.userCount;
                                var merchantCount = data.merchantCount;
                                var proCount = data.proCount;
                                var orderCount = data.orderCount;
                                var amountList = data.amountList;
                                var proRecordCount = data.proRecordCount;
                                var sumBuyNumber = data.sumBuyNumber;
                                arr.push(userCount);
                                arr.push(merchantCount);
                                arr.push(proCount);
                                arr.push(orderCount);
                                if (data) {
                                    for(var i=0;i<amountList.length;i++){
                                        console.log(amountList[i].sumAmount.replace(/,/g,''));
                                        arr.push(amountList[i].sumAmount.replace(/,/g,''));
                                    }
                                }
                                arr.push(proRecordCount);
                                if (data) {
                                    for(var i=0;i<sumBuyNumber.length;i++){
                                        console.log(sumBuyNumber[i].sumBuyNumber);
                                        arr.push(sumBuyNumber[i].sumBuyNumber);
                                    }
                                }

                            },
                            error : function(errorMsg) {
                                alert("不好意思，图表请求数据失败啦!");
                                myChart.hideLoading();
                            }
                        })
                        myChart.hideLoading();
                        return arr;
                    })()
                }
            ]
        };

        myChart.setOption(option)
    }
</script>


